<template>
  <div class="register_container">
    <el-form
      class="register_form"
      ref="registerFormRef"
      :model="registerFormData"
      :rules="registerFormValidate"
      status-icon
      label-width="12px"
      show-required-asterisk="true"
      size="large"
      lable-position="left"
    >
      <h1>Hello</h1>
      <h2>欢迎来到安真通</h2>

      <el-form-item label=" " prop="Username">
        <el-input
          v-model="registerFormData.Username"
          type="text"
          placeholder="请输入用户名"
          :prefix-icon="User"
        />
      </el-form-item>
      <el-form-item label=" " prop="NickName">
        <el-input
          v-model="registerFormData.NickName"
          type="text"
          placeholder="请输入昵称"
          :prefix-icon="Avatar"
        />
      </el-form-item>
      <el-form-item label=" " prop="Password">
        <el-input
          v-model="registerFormData.Password"
          type="password"
          placeholder="请输入密码"
          :prefix-icon="Lock"
          show-password
        />
      </el-form-item>
      <el-form-item label=" " prop="Phone">
        <el-input
          v-model="registerFormData.Phone"
          type="phone"
          placeholder="请输入手机号码"
          :prefix-icon="Iphone"
        />
      </el-form-item>
      <el-form-item label="必填" prop="Email">
        <el-input
          v-model="registerFormData.Email"
          type="email"
          placeholder="请输入邮箱"
          :prefix-icon="Message"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          v-loading.fullscreen.lock="fullscreenLoading"
          size="large"
          @click="handleRegister"
          >注册</el-button
        >
        <p>
          若已注册，请直接
          <router-link class="loginRouter" to="/login">登录</router-link>
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { User, Lock, Avatar, Iphone, Message } from "@element-plus/icons-vue";
import { ElMessage, ElNotification, FormRules } from "element-plus";
import { ref, reactive } from "vue";
import { reqRegister } from "@/api/user/index";
import { getTime } from "@/utils/time";
import { useRouter, useRoute } from "vue-router";

const registerFormRef = ref(); // 定义表单组件
const registerFormData = reactive({
  Username: "",
  NickName: "",
  Password: "",
  Phone: "",
  Email: "",
}); // 表单数据初始化
let fullscreenLoading = ref(false); //定义加载效果控件
let $router = useRouter();
let route = useRoute();

// 自定义表单校验规则
const registerFormValidate = reactive<FormRules<typeof registerFormData>>({
  Username: [
    {
      required: true,
      trigger: ["blur", "change"],
      message: "请输入用户名",
    },
    {
      pattern: /^(?![0-9])[\w\u4e00-\u9fa5]{3,10}$/,
      message: "用户名必须由3-10位字符组成,且不能以数字开头",
      trigger: "blur",
    },
  ],
  NickName: [
    {
      required: true,
      trigger: "blur",
      message: "请输入昵称",
    },
    {
      pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{3,10}$/,
      message: "昵称必须由3-10位中文、字母、数字或下划线组成",
      trigger: "blur",
    },
  ],
  Password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      pattern: /^[a-zA-Z/[a-zA-Z0-9_-]{6,18}$/,
      message: "密码必须由6-18位的字母或数字或'_'或'-'组成",
      trigger: "blur",
    },
  ],
  Phone: [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur",
    },
    {
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: "手机号码格式不对",
      trigger: "blur",
    },
  ],
  Email: [
    {
      required: true,
      trigger: "blur",
      message: "请输入邮箱",
    },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      trigger: "blur",
      message: "邮箱格式不对",
    },
  ],
});

// 注册函数
const handleRegister = async () => {
  fullscreenLoading.value = true;

  // 1、表单验证
  await registerFormRef.value.validate().catch((err: any) => {
    fullscreenLoading.value = false;
    ElMessage.error("格式不对，请按要求填写");
    throw err;
  });

  // 2、发起注册请求
  const resData = await reqRegister(registerFormData)
    .then((res) => {
      console.log(res);
      // 验证该用户是否已注册
      if (res.data.code === 7) {
        fullscreenLoading.value = false;
        ElMessage.error("该用户名/昵称已经注册过啦！");
        throw Error;
      }

      return res.data;
    })
    .catch((error) => {
      fullscreenLoading.value = false;
      ElNotification({
        type: "error",
        title: getTime() + "好!",
        message: error.message,
        showClose: false,
      });
      throw error;
    });

  console.log(resData);
  fullscreenLoading.value = false;
  ElMessage.success("注册成功！");
  $router.push((route.query.redirect as string) || "/home");
};
</script>

<style scoped lang="scss">
.register_container {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/background.png") no-repeat center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-form {
    width: 340px;
    min-width: 300px;
    padding: 20px;
    .el-input {
      opacity: 0.8;
    }
    .el-button {
      width: 100%;
      height: 40px;
    }
  }
  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 0;
  }
  p {
    color: #303133;
    width: 100%;
    text-align: center;
    padding: 5px;
    .loginRouter {
      font-size: 16px;
      font-weight: bolder;
      color: #409eff;
    }
  }
}
</style>
@/api/index
